<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta http-equiv="content-language" content="zh-CN">
    <meta content="1 days" name="revisit-after" />
    <meta name="robots" content="all">
    <meta name="viewport" content="width=750, maximum-scale=1.0, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="false" id="twcClient" name="twcClient" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)" />
    <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" />
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/coupon.css">
    <script src="js/common.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <title>我的券</title>
</head>

<body>
    <div class="coupon" id="coupon">
        <div class="title">
            <section @click.stop="setPage(0)" :class="currentPage == 0 ? 'Scolor' : ''">未使用</section>
            <section @click.stop="setPage(1)" :class="currentPage == 1 ? 'Scolor' : ''">已使用</section>
            <div  v-if="isClick" :class="currentPage == 0 ? 'Sleft' : 'Sright'"></div>
            <div v-if="!isClick"></div>
            
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="list"  v-if="noUsed">
                        <div class="item" v-for="item in noUsed" :data-code="item.code" @click.stop="goUse(item.code)">
                            <div class="left">
                                <div class="row1">
                                    爱仁医生
                                </div>
                                <div class="row2">
                                    亮度值兑换券
                                </div>
                            </div>
                            <div class="right">
                                <span>{{item.credit}}</span>
                                <span>点</span>
                                <div class="row1">用</div>
                            </div>
                        </div>
                    </div>
                    <p class="noUsed" v-if="!noUsed">您暂时还没有兑换的券哦～</p>
                </div>
                <div class="swiper-slide">
                    <div class="list"  v-if="used">
                        <div class="item" v-for="item in used">
                            <div class="left">
                                <div class="row1">
                                    爱仁医生
                                </div>
                                <div class="row2">
                                    亮度值兑换券
                                </div>
                            </div>
                            <div class="right">
                                <span>{{item.credit}}</span>
                                <span>点</span>
                            </div>
                        </div>
                    </div>
                    <p class="noUsed" v-if="!used">您还没有使用过券哦～</p>
                </div>

            </div>
        </div>
        <div class="tips" v-if="noUsed" >
            <div v-if="currentPage == 0">
                <div class="row1">您的券已生成</div>
                <div class="row2">点击将弹出二维码</div>
            </div>
        </div>
        <transition name="fade">
            <div class="code" v-if="showCode" @touchmove.prevent @click.stop="closeCode">
                <img :src="codeUrl" alt="">
            </div>
        </transition>
    </div>
    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#coupon',
        data() {
            return {
                swiper: '',
                currentPage:"",
                showCode: false,
                noUsed: '',
                used: '',
                codeUrl: '',
                SetFun: '',
                isClick:false
            };
        },
        methods: {
            setPage(current) {
                this.isClick = true;
                this.currentPage = current;
                this.swiper.slideTo(this.currentPage, 200, false);
            },
            closeCode() {
                this.showCode = false;
            },
            reload(){
                window.location.href = 'coupon.html';
            },
            getList(){
                var _self = this;
                var access_token = localStorage.getItem('access_token');
                this.access_token = access_token;
                if (access_token){
                    axios.get('http://airen.2020-2020.com/v1/users/tickets?access_token=' + access_token + "&status=1")
                        .then(function (res) {
                            _self.noUsed = res.data.data.items;
                        })
                    axios.get('http://airen.2020-2020.com/v1/users/tickets?access_token=' + access_token + "&status=2")
                        .then(function (res) {
                            _self.used = res.data.data.items;
                        })
                        .catch(function (error) {
                            var status = error.toString().replace(/[^0-9]/ig, "");
                            if (status == 402) {
                                _self.SetFun.isCode(_self.reload);
                            }
                        });
                } else {
                    _self.SetFun.isCode(_self.reload);
                }
            },
            goUse(code){
                var _self = this;
                _self.showCode = true;
                document.documentElement.scrollTop = document.body.scrollTop = 0;
                _self.codeUrl = "http://airen.2020-2020.com/v1/qrs?text=" + code
            }

        },
        created() {

        },
        mounted() {
            var _self = this;
            this.SetFun = new window.SetFun();
            _self.SetFun.hideMenu();
            this.getList()
            var swiper = new Swiper('.swiper-container', {
                initialSlide: 0,
                on: {
                    slideChangeTransitionEnd: function () {
                        _self.currentPage = this.activeIndex;
                    },
                },
                loop: false
            })
            this.swiper = swiper;
        },
    })
</script>